<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <h2 class="title">智能劳动合同审核系统</h2>
        <p class="sub-title">为大学毕业生提供专业的合同风险评估服务</p>
      </el-col>
    </el-row>

        <!-- 统计信息 -->
        <el-row :gutter="20" class="mt20">
      <el-col :sm="12" :lg="6">
        <el-card class="box-card" shadow="hover">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="el-icon-document"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">总合同数</div>
              <div class="stat-value">{{ stats.totalCount || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="12" :lg="6">
        <el-card class="box-card" shadow="hover">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="el-icon-loading"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">处理中</div>
              <div class="stat-value">{{ stats.processingCount || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="12" :lg="6">
        <el-card class="box-card" shadow="hover">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="el-icon-success"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">已完成</div>
              <div class="stat-value">{{ stats.completedCount || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="12" :lg="6">
        <el-card class="box-card" shadow="hover">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="el-icon-warning"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">风险合同</div>
              <div class="stat-value">{{ stats.riskCount || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表展示 -->
    <el-row :gutter="20" class="mt20">
      <el-col :sm="24" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-pie-chart"></i> 合同类型分布</span>
          </div>
          <div class="chart-container">
            <div ref="typeChart" style="height: 300px"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-data-line"></i> 处理进度</span>
          </div>
          <div class="chart-container">
            <div ref="progressChart" style="height: 300px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt20">
      <el-col :sm="24" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-upload"></i> 合同上传</span>
          </div>
          <div class="body">
            <el-upload
              class="upload-area"
              drag
              action="/api/contract/upload"
              :before-upload="beforeUpload"
              :on-success="handleUploadSuccess"
              :on-error="handleUploadError"
              multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将合同文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">
                <p>支持上传以下格式：</p>
                <ul class="upload-tips">
                  <li>PDF文档（推荐）</li>
                  <li>图片文件（JPG、PNG等）</li>
                  <li>Word文档（DOC、DOCX）</li>
                </ul>
              </div>
            </el-upload>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="24" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-info"></i> 系统介绍</span>
          </div>
          <div class="body">
            <div class="feature-item">
              <h3><i class="el-icon-aim"></i> 系统目标</h3>
              <p>帮助应届毕业生识别劳动合同中的潜在风险，维护自身权益。</p>
            </div>
            <div class="feature-item">
              <h3><i class="el-icon-magic-stick"></i> 核心功能</h3>
              <ul class="feature-list">
                <li>智能识别合同条款</li>
                <li>自动标注风险内容</li>
                <li>薪资福利分析</li>
                <li>工作时间评估</li>
                <li>竞业限制分析</li>
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt20">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-guide"></i> 使用流程</span>
          </div>
          <div class="body">
            <el-steps :active="1" simple style="margin-top: 20px">
              <el-step title="上传合同" icon="el-icon-upload"></el-step>
              <el-step title="AI分析" icon="el-icon-cpu"></el-step>
              <el-step title="查看报告" icon="el-icon-document-checked"></el-step>
            </el-steps>
            <div class="step-details">
              <div class="step-item">
                <h4>1. 上传合同文件</h4>
                <p>选择您收到的劳动合同文件上传，支持多种文件格式。</p>
              </div>
              <div class="step-item">
                <h4>2. AI智能分析</h4>
                <p>系统将自动分析合同内容，识别关键条款并进行风险评估。</p>
              </div>
              <div class="step-item">
                <h4>3. 查看分析报告</h4>
                <p>获取详细的分析报告，包括风险提示、条款解读和改进建议。</p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getContractStats, getContractTypeStats } from "@/api/system/contract";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "1.0.0",
      // 统计信息
      stats: {
        totalCount: 0,
        processingCount: 0,
        completedCount: 0,
        riskCount: 0
      },
      typeChart: null,
      progressChart: null
    };
  },
  mounted() {
    this.initData();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.typeChart) {
      this.typeChart.dispose();
    }
    if (this.progressChart) {
      this.progressChart.dispose();
    }
  },
  methods: {
    async initData() {
      try {
        const [statsRes, typeStatsRes] = await Promise.all([
          getContractStats(),
          getContractTypeStats()
        ]);
        
        this.stats = statsRes.data;
        this.initTypeChart(typeStatsRes.data);
        this.initProgressChart();
      } catch (error) {
        console.error('获取统计数据失败:', error);
      }
    },
    initTypeChart(typeData) {
      this.typeChart = echarts.init(this.$refs.typeChart);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center'
        },
        series: [{
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '20',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: typeData.map(item => ({
            name: item.typeName,
            value: item.count
          }))
        }]
      };
      this.typeChart.setOption(option);
    },
    initProgressChart() {
      this.progressChart = echarts.init(this.$refs.progressChart);
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['总数', '处理中', '已完成', '风险']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [
            this.stats.totalCount,
            this.stats.processingCount,
            this.stats.completedCount,
            this.stats.riskCount
          ],
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            color: function(params) {
              const colors = ['#409EFF', '#E6A23C', '#67C23A', '#F56C6C'];
              return colors[params.dataIndex];
            }
          }
        }]
      };
      this.progressChart.setOption(option);
    },
    handleResize() {
      if (this.typeChart) {
        this.typeChart.resize();
      }
      if (this.progressChart) {
        this.progressChart.resize();
      }
    },
    // 上传前的验证
    beforeUpload(file) {
      const isValidType = [
        'application/pdf',
        'image/jpeg',
        'image/png',
        'application/msword',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      ].includes(file.type);
      
      if (!isValidType) {
        this.$message.error('请上传PDF、图片或Word格式的文件！');
        return false;
      }
      
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('文件大小不能超过 10MB！');
        return false;
      }
      return true;
    },
    // 上传成功的处理
    handleUploadSuccess(response, file, fileList) {
      this.$message.success('文件上传成功，正在分析中...');
      // TODO: 处理上传成功后的逻辑
    },
    // 上传失败的处理
    handleUploadError(err, file, fileList) {
      this.$message.error('文件上传失败，请重试！');
    }
  }
};
</script>

<style scoped lang="scss">

.chart-container {
    padding: 10px;
  }
.home {

  .stat-card {
    display: flex;
    align-items: center;
    padding: 10px;

    .stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      
      i {
        font-size: 24px;
        color: #fff;
      }
    }

    &:nth-child(1) .stat-icon {
      background-color: #409EFF;
    }
    &:nth-child(2) .stat-icon {
      background-color: #E6A23C;
    }
    &:nth-child(3) .stat-icon {
      background-color: #67C23A;
    }
    &:nth-child(4) .stat-icon {
      background-color: #F56C6C;
    }

    .stat-info {
      flex: 1;
      
      .stat-title {
        font-size: 14px;
        color: #909399;
        margin-bottom: 5px;
      }
      
      .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
      }
    }
  }
  padding: 20px;

  .title {
    font-size: 32px;
    font-weight: bold;
    color: #409EFF;
    text-align: center;
    margin-bottom: 10px;
  }

  .sub-title {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 30px;
  }

  .mt20 {
    margin-top: 20px;
  }

  .box-card {
    margin-bottom: 20px;
    
    .el-card__header {
      padding: 15px 20px;
      font-size: 16px;
      font-weight: bold;
      
      i {
        margin-right: 5px;
      }
    }
  }

  .upload-area {
    .el-upload {
      width: 100%;
    }
    
    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }

  .upload-tips {
    list-style: none;
    padding-left: 20px;
    margin-top: 10px;
    
    li {
      line-height: 24px;
      color: #666;
      
      &:before {
        content: "✓";
        color: #67C23A;
        margin-right: 8px;
      }
    }
  }

  .feature-item {
    margin-bottom: 20px;
    
    h3 {
      font-size: 16px;
      color: #303133;
      margin-bottom: 10px;
      
      i {
        color: #409EFF;
        margin-right: 5px;
      }
    }
    
    .feature-list {
      list-style: none;
      padding-left: 20px;
      
      li {
        line-height: 28px;
        color: #606266;
        
        &:before {
          content: "•";
          color: #409EFF;
          margin-right: 8px;
          font-weight: bold;
        }
      }
    }
  }

  .step-details {
    margin-top: 30px;
    padding: 20px;
    background: #f5f7fa;
    border-radius: 4px;
    
    .step-item {
      margin-bottom: 20px;
      
      h4 {
        color: #409EFF;
        margin-bottom: 8px;
      }
      
      p {
        color: #606266;
        line-height: 24px;
      }
    }
  }
}
</style>